/**
 * Created by Administrator on 2018/3/27.
 */
export const commonBrokenLineAttr = {
  data() {
    return {
      query: '',
      refreshDelay: 120
    }
  },
  computed: {},
  methods: {}
}
// 折线图公共属性
export const brokenLineChartOption = {
//          grid:[//此参数可在一个dom中划分多个图表 可设置不同图表的位置
//            {
//              height: '24%',
//              top:'4%',
//              left: '14%',
//              tooltip: {
//                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
//              }
//            },
//            {
//              height: '55%',
//              top:'31%',
//              tooltip: {
//                show:false,
//
//              }
//            }
//          ],
  title: {
    show: false,
    text: '未来一周气温变化',
    subtext: '纯属虚构'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['淮河医院', '市中心医院'],
    y: 'bottom',
    itemWidth: 8,
    itemHeight: 10,
    textStyle: {
      color: '#ffffff'
    }
  },
  toolbox: {
    show: false,
    feature: {
      mark: {show: true},
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  },
  calculable: true,
  xAxis: [
    {
      axisTick: {
        show: false //不显示x轴坐标的刻度
      },
      data: [2013, 2014, 2015, 2016, 2017, 2018],
      axisLine: {
        show: true, //是否显示横轴的坐标线
        lineStyle: {
          color: '#304562'
        }
      },
      axisLabel: {
        show: true,
        color: '#ffffff'
      }
    }
  ],
  yAxis: [
    {
      max: 1.6,
      min: 0.9,
      type: 'value',
      name: '单位：天',
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        formatter: '{value}'
      },
      axisLabel: {
        show: true,
        color: '#ffffff'
      },
      axisLine: {
        show: true, //是否显示纵坐标的竖线
        lineStyle: {
          color: '#304562'
        }
      },
      axisTick: {
        show: false //不显示x轴坐标的刻度
      },
      splitLine: {
        show: true, // 是否显示横向的分割线
        type: 'dotted',
        lineStyle: {
          color: '#253853'
        }
      }
    }
  ],
  series: [
    {
      name: '淮河医院',
      type: 'line',
      data: [11, 11, 15, 13, 12, 13, 10],
      symbolSize: 10,
      symbol: 'circle',
      showSymbol: true,
      label: {
        normal: {
          show: true,
          position: 'top',
          fontSize: 20
        }
      },
      markPoint: {
//                data : [
//                  {type : 'max', name: '最大值'},
//                  {type : 'min', name: '最小值'}
//                ]
      },
      markLine: {
//                data : [
//                  {type : 'average', name: '平均值'}
//                ]
      }
    },
    {
      name: '市中心医院',
      type: 'line',
      data: [1, 2, 2, 5, 3, 2, 0],
      symbolSize: 10,
      symbol: 'circle',
      label: {
        normal: {
          show: true,
          position: 'top',
          fontSize: 20
        }
      },
      markPoint: {
//                data : [
//                  {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
//                ]
      },
      markLine: {
//                data : [
//                  {type : 'average', name : '平均值'}
//                ]
      }
    }
  ]
}

export const formatFunc = function (params) {
  // return params.value + '\n' + (params.percent - 0).toFixed(0) + '%'
  if (params.percent >= 10) {
    return (params.percent - 0) + '%'
  } else {
    // if (params.dataIndex % 2 == 0) {
    //   return (params.percent - 0) + '%' + '\n' + '\n'
    // } else {
    //   return (params.percent - 0) + '%'
    // }
    return ''
  }
}

export const tooltipFormatFunc = function (params) {
  let txt = `<span style='color:${params.color};'>${params.name}：${params.value}万元</span></br><span style='color:#c7c7c7'>占比：${params.percent}%</span>`
  return txt;
}

// 饼状图公共属性
export const pieChartOption = {
  title: {
    show: false,
    text: '某站点用户访问来源',
    subtext: '纯属虚构',
    x: 'center'
  },
  tooltip: {
    show: true,
    trigger: 'item',
    formatter: "{b} : {c} ({d}%)"
  },
  legend: {
    show: false, // 是否显示右上角的商标牌
    orient: 'vertical',
    x: 'right',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  toolbox: {
    show: false, // 是否显示工具栏目，如保存图片
    feature: {
      mark: {show: true},
      dataView: {show: true, readOnly: false},
      magicType: {
        show: true,
        type: ['pie', 'funnel'],
        option: {
          funnel: {
            x: '25%',
            width: '50%',
            funnelAlign: 'left',
            max: 1548
          }
        }
      },
      restore: {show: true},
      saveAsImage: {show: true}
    }
  },
  calculable: true,
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '50%', // 饼状图半径
      center: ['50%', '50%'], // 饼状图位置
      hoverAnimation: false,
      tooltip: {
        show: true,
        textStyle: {
          fontSize: 12
        },
        formatter: tooltipFormatFunc
      },
      label: {
        show: true,   //是否显示标示文字
        position: 'outer',
        fontSize: 14,
        color: '#D6D7DA'
      },
      labelLine: {
        show: true,   //隐藏标示线
        length: 50,
        length2: 35,
        lineStyle: {
          type: 'solid',
          color: '#636D7D'
        }
      },
      data: [
        {
          value: 335,
          name: '药品',
          itemStyle: {
            color: '#FFD66A'
          }
        },
        {
          value: 200,
          name: '中药饮片',
          itemStyle: {
            color: '#FF6A94'
          }
        },
        {
          value: 310,
          name: '检查和化验',
          itemStyle: {
            color: '#9DE5F3'
          }
        },
        {
          value: 360,
          name: '诊疗服务',
          itemStyle: {
            color: '#FA6B67'
          }
        },
        {
          value: 234,
          name: '卫生材料',
          itemStyle: {
            color: '#8BC89F'
          }
        }
      ]
    },
    {
      name: '访问来源',
      type: 'pie',
      radius: '50%', // 饼状图半径
      center: ['50%', '50%'], // 饼状图位置
      hoverAnimation: false,
      tooltip: {
        show: true,
        textStyle: {
          fontSize: 12
        },
        formatter: tooltipFormatFunc
      },
      label: {
        show: true,   //是否显示标示文字
        position: 'inner',
        fontSize: 16,
        color: '#000',
        formatter: formatFunc
      },
      labelLine: {
        show: false   //隐藏标示线
      },
      data: [
        {
          value: 335,
          name: '药品',
          itemStyle: {
            color: '#FFD66A'
          }
        },
        {
          value: 200,
          name: '中药饮片',
          itemStyle: {
            color: '#FF6A94'
          }
        },
        {
          value: 310,
          name: '检查和化验',
          itemStyle: {
            color: '#9DE5F3'
          }
        },
        {
          value: 360,
          name: '诊疗服务',
          itemStyle: {
            color: '#FA6B67'
          }
        },
        {
          value: 234,
          name: '卫生材料',
          itemStyle: {
            color: '#8BC89F'
          }
        }
      ]
    }
  ]
}

// 直方图公共属性
export const straightSideOption = {
  // Make gradient line here
  title: {
    subtext: '单位：万元',
    left: '4%',
    top: '7%',
    x: 'left',
    subtextStyle: {
      color: '#fff'
    }
  },
  grid: [//此参数可在一个dom中划分多个图表 可设置不同图表的位置
    {
      width: '18%',
      left: '75%',
      height: '78%',
      top: '12%',
      tooltip: {
        formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
      }
    },
    {
      width: '45%',
      left: '20%',
      height: '78%',
      top: '12%',
      tooltip: {
        formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
      }
    }
  ],
  legend: {
    left: 'center',
    top: '95%',
    icon: 'rect',
    itemWidth: 30,
    itemHeight: 6,
    itemGap: 20,
    selectedMode: false,
    data: ['2018年', '2017年'],
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    /*trigger: 'axis',*/
  },
  xAxis: [{
    type: 'value',
    splitLine: {
      show: false
    },
    position: 'top',
    splitNumber: 2,
    axisLine: {
      show: false
    },
    axisLabel: {
      formatter: '{value}',
      textStyle: {
        color: '#fff'
      }
    },
    axisTick: {
      show: false
    }

  }, {
    type: 'value',
    splitLine: {show: false},
    gridIndex: 1,
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false,
      formatter: '{value}',
      textStyle: {
        color: '#fff'
      }
    },
    axisTick: {
      show: false
    }
  }],
  yAxis: [{
    data: ['医院1', '医院1', '医院1', '医院1', '医院1', '医院1'],
    splitLine: {
      show: false
    },
    axisLine: {
      show: true,//显示y轴坐标线并设置为虚线
      lineStyle: {
        type: 'solid',
        color: '#2a4565'
      }
    },
    axisTick: {
      show: false //不显示y轴坐标的刻度
    },
    axisLabel: {
      show: false //不显示y轴坐标数值
    },
  }, {
    data: ['医院2', '医院2', '医院1', '医院1', '医院1', '医院1'],
    gridIndex: 1,
    axisLabel: {
      formatter: '{value}',
      textStyle: {
        color: '#fff'
      }
    },
    axisLine: { //y轴的横线是否显示
      show: true,
      lineStyle: {
        color: '#2a4565'
      }
    },
    axisTick: { //y轴的刻度短竖线是否显示
      show: false
    }
  }],
  visualMap: [{
    show: true,
    dimension: 0,
    seriesIndex: 0,
    left: 'center',
    top: 'top',
    itemWidth: 10,
    itemHeight: 10,
    orient: "horizontal",
    textStyle: {
      color: '#fff'
    },
    pieces: [
      {
        max: 1.24,
        color: '#67ffdb',
        symbol: 'circle',
        label: '增长率（低于平均值）',
      }, {
        min: 1.24,
        color: '#2b9ff6',
        symbol: 'circle',
        label: '增长率（高于平均值）',
      }
    ],
  }],
  series: [{
    type: 'scatter',
    showSymbol: true,
    data: [-1.4, 1, 2.3, -2.04, 4.6, 3],
    symbolSize: 10,
    label: {
      show: true,
      position: 'right',
      formatter: '{c}%',
      color: '#fff'
    },
    markLine: {
      label: {
        position: 'start',
        formatter: '{c}%'
      },
      symbol: 'none',
      data: [
        {
          type: 'average',
          name: '平均增长率',
        }
      ],
      lineStyle: {
        color: '#ff6a93'
      }
    }
  }, {
    type: 'bar',
    showSymbol: false,
    barGap: 0,
    name: '2018年',
    itemStyle: {
      color: '#ff6a93'
    },
    data: [100,
      99.77,
      90.69,
      86.14,
      84.48,
      84.2],
    label: {
      show: true,
      position: 'right',
      formatter: '{c}%',
      color: '#fff'
    },
    barWidth: '30%',
    barMaxWidth: 20,
    xAxisIndex: 1,
    yAxisIndex: 1,
    markLine: {
      symbol: 'none',
      label: {
        position: 'start',
        formatter: '{c}%',
        color: '#fff'
      },
      data: [
        {
          name: '2018平均',
          xAxis: 45,
          lineStyle: {
            color: '#ff6a93'
          }
        }
      ]
    },
  }, {
    type: 'bar',
    name: '2017年',//此值与legend图例对应
    itemStyle: {
      color: '#ffd66a'
    },
    label: {
      show: true,
      position: 'right',
      formatter: '{c}%',
      color: '#fff'
    },
    showSymbol: false,
    data: [20, 30, 40, 50, 60, 200],
    barWidth: '30%',
    barMaxWidth: 20,
    xAxisIndex: 1,
    yAxisIndex: 1,
    markLine: {
      symbol: 'none',
      lineStyle: {
        color: '#55cdb7'
      },
      label: {
        position: 'end',
        formatter: '{c}%',
        color: '#fff'
      },
      data: [
        {
          name: '2017平均',
          xAxis: 45,
          lineStyle: {
            color: '#ffd66a'
          }
        }
      ],
    },
  }],
}
